<template>
  <div>
    <el-card class="search-card">
      <basic-table-form
        ref="formData"
        isScalingBtn
        :formColumns="formItemList"
        :dataSource="formData"
        :defaultExpandStatus="false"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      >
        <el-row slot="extensionActions" type="flex">
          <el-button
            type="primary"
            @click="batchDialogVisble = true"
          >批量维护</el-button>
        </el-row>
      </basic-table-form>
    </el-card>
    <el-card class="table-card">
      <basic-table
        showActionCol
        :loading="tableInfo.loading"
        :columns="tableInfo.columns"
        :dataSource="tableInfo.list"
        :pagination="pagination"
        :pageSizes="pageSizes"
        :tableHeight="460"
        :showSelectCol="false"
        :actionColWidth="120"
        :actionRender="renderTableBtnAction"
        @pageChange="handlePageChange"
        @pageSizeChange="handlePageSizeChange"
      >
      </basic-table>
    </el-card>
    <batch-maintain-dialog :visible.sync="batchDialogVisble"></batch-maintain-dialog>
  </div>
</template>

<script>
import BasicTableForm from '@/components/BasicForm';
import BasicTable from '@/components/BasicTable';
import { ApiRequest } from '@api/basePage';
import { mapGetters } from 'vuex';
import { getBtnsId } from '@/libs/btnsPermission';
import batchMaintainDialog from '@/components/common/dialog/batchMaintainDialog';
import {
  FORM_ITEM_LIST,
  TABLE_COLUMNS,
} from '../constants/auditing';
import { getSearchParamBySearchType } from '@/utils/getUtils';
import { isResponseSuccess, handleOpenNewPage } from '@/utils/bizUtils';

export default {
  components: {
    BasicTableForm,
    BasicTable,
    batchMaintainDialog
  },
  data () {
    return {
      batchDialogVisble: false,
      formItemList: FORM_ITEM_LIST,
      tableInfo: {
        list: [],
        columns: TABLE_COLUMNS,
        loading: false
      },
      pagination: {
        nowPage: 1,
        totalNum: 0,
        pageShow: 10
      },
      pageSizes: [10, 20, 30, 40],
      formData: {
        categoryPath: '',
        spuNo: '',
        productNameFinal: '',
        brandName: '',
        productType: '',
        operName: ''
      },
      apiObj: {
        // 审核中列表
        getPreparingList: {
          url: '/sysback/prepare/list/getPreparingAuditingList', // 接口地址
          type: 'post' // 接口请求类型
        },
        // 跳转审核界面
        auditAndApprove: {
          url: '/sysback/oa/getAuditPageUrl',
          type: 'post'
        }
      }
    };
  },
  computed: {
    ...mapGetters('permissions/systemBtns', ['showBtn'])
  },
  created () {
    this.getTableData();
  },
  methods: {
    // 渲染表格操作栏按钮
    renderTableBtnAction (h, { row }) {
      return <div class="table-action">
        <el-button type="text" onClick={() => this.viewRecord(row)}>查看单据</el-button>
        <el-button type="text" onClick={() => this.handleClickMore(row, 'Audit')}>审核</el-button>
      </div>;
    },
    // 获取表单内容
    getFormData (data) {
      this.formData = data;
    },
    // 表单查询
    handleQueryForm () {
      this.pagination.nowPage = 1;
      this.getTableData();
    },
    // 页码切换
    handlePageChange (val) {
      this.pagination.nowPage = val;
      this.getTableData();
    },
    // 每页条数切换
    handlePageSizeChange (val) {
      this.pagination.pageShow = val;
      this.getTableData();
    },
    getTableData () {
      let data = {
        searchParam: JSON.stringify(getSearchParamBySearchType(FORM_ITEM_LIST, this.formData)),
        ...this.pagination
      };
      const curBtnId = getBtnsId('查询');
      sessionStorage.setItem('buttonId', curBtnId);
      this.tableInfo.loading = true;
      ApiRequest(
        this.apiObj.getPreparingList.url,
        this.apiObj.getPreparingList.type,
        data,
        false
      ).then((res) => {
        this.tableInfo.loading = false;
        if (isResponseSuccess(res)) {
          const { results, totalNum } = res.retData;
          this.tableInfo.list = results;
          this.pagination.totalNum = totalNum;
        }
      });
    },
    // 跳转OA
    handleClickMore (row, name) {
      if (name === 'Audit') {
        let curBtnId = getBtnsId('审核');
        sessionStorage.setItem('buttonId', curBtnId);
        // 跳转审批界面
        ApiRequest(
          this.apiObj.auditAndApprove.url +
            `?oaRequestId=` +
            row.workflowRequestId,
          this.apiObj.auditAndApprove.type
        )
          .then((res) => {
            if (isResponseSuccess(res)) {
              window.open(res.retData);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      } else if (name === 'AuditRecord') {
        let curBtnId = getBtnsId('审核');
        sessionStorage.setItem('buttonId', curBtnId);
        // 跳转审批界面
        ApiRequest(
          this.apiObj.auditAndApprove.url +
            `?oaRequestId=` +
            row.workflowRequestId,
          this.apiObj.auditAndApprove.type
        )
          .then((res) => {
            if (isResponseSuccess(res)) {
              window.open(res.retData);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      }
    },
    // 查看单据
    viewRecord (row, index) {
      // this.$router.push({
      //   path: '/commodity/commodityAccessManage/waitAccess/auditing/auditingView',
      //   query: { recordNo: row.recordNo }
      // });
      handleOpenNewPage(this, {
        name: 'auditingView',
        query: { recordNo: row.recordNo }
      })
    }
  }
};
</script>
